$(document).ready(function(){
  var posicionActual = 0;
  var slideAncho = 840;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Borra el scrollbar con JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Preparo todos los .slides envolviendolos con #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Los floto a la izquierda para mostrarlos horizonalmente, reajusto el ancho de los  .slides
	.css({
      'float' : 'left',
      'width' : slideAncho
    });

  // Pongo el ancho de  #slideInner igual al total del anocho de todos los slides
  $('#slideInner').css('width', slideAncho * numberOfSlides);

  // Inserto el control en el DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Oculto la flecha del control de la izquierda con la primer carga
  controlFlechas(posicionActual);

  // Creo un nuevo envento listeners para .controls 
  $('.control')
    .bind('click', function(){
    // Determinar la nueva posicion
	posicionActual = ($(this).attr('id')=='rightControl') ? posicionActual+1 : posicionActual-1;
    
	// Ocultar / Mostrar contoles
	controlFlechas(posicionActual);
    // Mover el slideInner usando solo margin-left
    $('#slideInner').animate({
      'marginLeft' : slideAncho*(-posicionActual)
    });
  });

  // controlFlechas: oculta y muestra los controles de flechas dependiendo de la posicion actual
  function controlFlechas(position){
    // Oculta la flecha izquierda si la posicion esta en el primer slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Oculta la flecha derecha si la posicion esta en el ultimo slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});